/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableHighlight,
    Alert,
    ScrollView,
    WebView,
    Dimensions,
    Linking
} from 'react-native';

import {Actions} from 'react-native-router-flux'
import CommonStyles from '../styles/common';
import Ionicons from 'react-native-vector-icons/Ionicons'
import LoadingView from './custom/loadingView';
import { GetNewsDetailSource } from '../actions/newsActions';
import Moment from 'moment'

var {width,height} = Dimensions.get('window');

export default class NewsDetail extends Component {
    constructor (props) {
        super(props)
    }
    
    componentWillMount() { 
        this.props.dispatch(GetNewsDetailSource(this.props.id));
    }

    render() {
        Moment.updateLocale('en', {
            relativeTime : {
                future: "%s",
                past:   "%s前",
                s:  "秒",
                m:  "1分钟",
                mm: "%d分钟",
                h:  "1小时",
                hh: "%d小时",
                d:  "1天",
                dd: "%d天",
                M:  "1个月",
                MM: "%d个月",
                y:  "1年",
                yy: "%d年"
            }
        });
        
        var html= null;
        if (!this.props.isDetailRefreshing)
        {
            if(this.props.newsDetailSource&&this.props.newsDetailSource.url&&this.props.newsDetailSource.url['#cdata'])
            {
                var style='<style type="text/css">img {max-width: '+(width-40)+'px;} </style>';
                var strH5Type='<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">';
                var strHtmlHead='<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head>';
                html =strH5Type+ strHtmlHead+'<bdoy>'+ style + this.props.newsDetailSource.body['#cdata']+'</body></html>';
            }
        }
        
        return (
             <View style={[CommonStyles.container,{paddingTop:5,paddingLeft:5,paddingRight:5}]}>
                    {html?
                        <View style={styles.newsHeader}>
                            <Text style={styles.newsTitleText}>{this.props.newsDetailSource.title['#cdata']}</Text>
                            <View style={styles.newsHeaderInfo}>
                                <Text style={styles.newsAuthorText}>{this.props.newsDetailSource.author['#cdata']}</Text>
                                <Text style={styles.newsPubDateText}>{Moment(this.props.newsDetailSource.pubDate).fromNow()}</Text>
                            </View>
                        </View>:null}
                    {html?
                        <WebView 
                            ref='webview'
                            style={styles.webView}
                            source={{html:html}}
                            automaticallyAdjustContentInsets={true}  
                            startInLoadingState={true}
                            domStorageEnabled={true}
                            javaScriptEnabled={true}
                            scalesPageToFit={false}
                            />
                        :null
                    }
                    {html?<View style={styles.newsFooter}></View>:null}
             </View>
        );
    }
}

const styles = StyleSheet.create({
    newsHeader:
    {
        height:63
    },
    newsTitleText:{
        fontSize:18,
        color:'#000',
    },
    newsAuthorText:{
        fontSize:14,
        color:'#128C29',
        marginRight:10
    },
    newsPubDateText:{
        fontSize:14
    },
    newsHeaderInfo:{
        flexDirection: 'row',
    },
    webView:{
        flex:1,
        backgroundColor: '#FAFAFA'
    },
    newsFooter:{
        height:40
    }
});
